<template>
	<view class="searchLis">
		<view class="cu-bar bg-white search" style="padding-top: 100rpx;padding-bottom: 20rpx;">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input 
				type="text" 
				v-model="className" 
				placeholder="搜索课程" 
				confirm-type="search" 
				@confirm="searchClasses"
				focus="true"
				></input>
			</view>
			<text class="margin-right" @click="goback">取消</text>
		</view>
		<view class="publicContent">
			<view class="content_one" v-for="item in seachList" :key="item.id" @click="gotovideodetail(item.id)">
				<image :src="item.image_url" mode=""></image>
				<view class="others">
					<h3>{{item.name}}</h3>
					<text style="font-size: 26rpx;">教师:{{item.teacher_name}}</text>
					<uni-rate v-model="item.grade" :readonly="true" :is-fill="false" :max="5" allow-half :size="16"/>
					<view class="content_oneBottom">
						<text style="font-size: 26rpx;margin-top: 6rpx;">{{item.add_time}}</text>
						<view class="bottom_right">
							<text class="lg text-gray cuIcon-attentionfavor">{{item.click_nums}}</text>
							<text class="lg text-gray cuIcon-appreciate">{{item.give_like_nums}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noData" v-if="noData" style="position: absolute;top: 30%;left: 40%;">
			暂无内容
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				className:'',
				seachList:[],
				noData:true,
				area:''
			}
		},
		onLoad(option) {
			this.area = option.area
		},
		methods: {
			async searchClasses(){
				if(this.className==''){
					this.seachList = []
					this.noData = true
					return
				}
				let res = await this.$myRuquest({
					url:'/search/',
					data:{condition:this.className}
				})
				this.seachList = res.data
				this.noData = false
			},
			goback(){
				if(this.area=='kind'){
					uni.switchTab({
						url:'/pages/kind/kind'
					})
				}else{
					uni.switchTab({
						url:'/pages/homepage/homepage'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.searchLis{
	.publicContent{
		padding: 10rpx 10rpx;
		.content_one{
			display: flex;
			padding: 30rpx 30rpx;
			margin-bottom: 20rpx;
			background: white;
			border-radius: 20rpx;
			image{
				width: 185rpx;
				height: 132rpx;
				border-radius: 15rpx;
			}
			.others{
				width: 565rpx;
				height: 132rpx;
				padding-left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.content_oneBottom{
					display: flex;
					justify-content: space-between;
					.bottom_right{
						padding-left: 50rpx;
					}
				}
			}
		}
	}
}
</style>
